<template>
  <div>
    <!--头部-->
      <div class="d_head">
        <div class="d_head-1">
          <img class="img"  @click="goHome()"  src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/logo_3.png" title="返回主页">
          <!--天气预报-->
          <div class="weather" >
            <div class="div_img_1" v-popover:popover4 >
                <img :src='weather.now.weather_pic' alt="天气信息" >
              <!--hover 触发天气详情-->
              <el-popover
                      ref="popover4"
                      placement="top-start"
                      width="auto"
                      transition="fade-in-linear"
                      trigger="hover">
                <div class="w_info_more">
                  <!--上部分-->
                  <div class="more_1">
                    <div style="margin-top: 5px;margin-bottom: 2px;margin-left: 15px">{{weather.cityInfo.c7}} <span style="font-size: 16px;color: #cf9236">{{weather.cityInfo.c5}}<span v-if="weather.cityInfo.c5!=weather.cityInfo.c3">·{{weather.cityInfo.c3}}</span></span> <span style="font-size: 15px;color: powderblue">{{weather.now.temperature_time}}发布</span></div>
                    <div>
                      <div style="height:auto;overflow: hidden">
                        <img style="float: left;margin-right: 10px;margin-top: 15px;margin-left: 15px" width="60px" height="60px" :src="weather.now.weather_pic" alt="">
                        <div style="float: left">
                          <div style="font-size:40px;" >{{weather.now.temperature}}°</div>
                          <div>{{weather.now.weather}}</div>
                        </div>
                        <div style="float: right;margin-top: 5px;margin-right: 15px">
                          <div>{{weather.now.wind_direction}}&nbsp{{weather.now.wind_power}}</div>
                          <div>空气{{weather.now.aqiDetail.quality}}&nbsp{{weather.now.aqiDetail.aqi}}</div>
                          <div>相对湿度 {{weather.now.sd}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--第二部分-->
                  <div class="more_2">
                    <div class="info_to">
                      <div>今天</div>
                      <img width="30px" height="30px" :src="weather.f1.day_weather_pic" alt="">
                      <div>{{weather.f1.day_weather}}</div>
                      <div style="font-size: 16px;margin-top: 7px">{{weather.f1.day_air_temperature}}℃/{{weather.f1.night_air_temperature}}℃</div>
                    </div>
                    <div class="info_to">
                      <div>明天</div>
                      <img width="30px" height="30px" :src="weather.f2.day_weather_pic" alt="">
                      <div>{{weather.f2.day_weather}}</div>
                      <div style="font-size: 16px;margin-top: 7px">{{weather.f2.day_air_temperature}}℃/{{weather.f2.night_air_temperature}}℃</div>
                    </div>
                    <div class="info_to">
                      <div>后天</div>
                      <img width="30px" height="30px" :src="weather.f3.day_weather_pic" alt="">
                      <div>{{weather.f3.day_weather}}</div>
                      <div style="font-size: 16px;margin-top: 7px">{{weather.f3.day_air_temperature}}℃/{{weather.f3.night_air_temperature}}℃</div>
                    </div>
                  </div>
                </div>
              </el-popover>
            </div>
            <div class="d_info">
              <div class="info_1"><span>{{weather.cityInfo.c3}}<span @click="dialogUpdateCityVisible=true" class="s_update">[切换]</span>  </span></div>
              <div class="info_2"><span>{{weather.now.weather}}</span>&nbsp&nbsp<span>{{weather.now.temperature}}°C</span></div>
            </div>
            <!--更换城市的列表-->
            <el-dialog width="900px"   title="更换城市"  :visible.sync="dialogUpdateCityVisible" :append-to-body="true" :lock-scroll="false" >
              <!--省级-->
              <el-select @change="updateProvinces(select_provinces)" v-model="select_provinces" style="margin-left: 70px;margin-bottom: 30px"  clearable placeholder="请选择">
                <el-option
                        v-for="item in provinces"
                        :key="item.provinceid"
                        :label="item.province"
                        :value="item.provinceid">
                </el-option>
              </el-select>
              <!--市级-->
              <el-select @change="updateCity(select_cities)"  v-model="select_cities" clearable >
                <el-option
                        v-for="item in cities"
                        :key="item.cityid"
                        :label="item.city"
                        :value="item.cityid">
                </el-option>
              </el-select>
              <!--地方级-->
              <el-select  v-model="select_areas"  clearable placeholder="请选择">
                  <el-option
                          v-for="item in areas"
                          :key="item.area"
                          :label="item.area"
                          :value="item.area">
                  </el-option>
              </el-select>
              <el-button style="margin-left: 20px" :disabled="isDisbled" @click="updateCityWeather()" :type="bu_type">更换</el-button>
            </el-dialog>
          </div>

          <el-menu id="el-menu" text-color="#F0EBEA" active-text-color="red"   background-color="#F5ABA9"  class="el-menu-demo" mode="horizontal" >
            <el-menu-item index="1" @click="open_window()">会员充值</el-menu-item>

            <el-dialog width="400px"  title="开通会员"  :visible.sync="dialogVipVisible" :append-to-body="true" :lock-scroll="false" >
              <el-form id="form" :model="ruleForm" action="https://www.dragonjun.com/boot/pay/add" method="post"   label-width="80px">
                <el-form-item label="付费模式  :" prop="name">
                  <el-radio v-model="ruleForm.radio"  :label="1">月卡</el-radio>
                  <el-radio v-model="ruleForm.radio" :label="6">半年卡</el-radio>
                  <el-radio v-model="ruleForm.radio" :label="12">年卡</el-radio>
                  <!--隐藏域传值-->
                  <input type="hidden" name="userId" :value="user">
                  <input type="hidden" name="count" :value="count">
                  <input type="hidden" name="money" :value="money">
                </el-form-item>
                <el-form-item label="应付金额  :" prop="password">
                  <!--<el-input style="width: 210px"  placeholder="金额" v-model="money" :disabled="true"></el-input>-->
                  <span style="color: red">{{money}}</span>  元
                </el-form-item>
                <el-form-item>
                  <el-button id="pay" type="primary" @click="openVip()" >立即开通</el-button>
                 <!-- <el-button type="danger"  @click="dialogVipVisible=false" >暂不开通</el-button>-->
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-submenu  v-if="isLogin===2 || loginInfo!=null " index="2">
              <template v-if="loginInfo.is_vip===1" slot="title"><img class="info_img" :src="loginInfo.url" alt=""><span style="color: white">{{loginInfo.username}}</span></template>
              <template  v-else slot="title"><img class="info_img" :src="loginInfo.url" alt=""><span style="color: red">{{loginInfo.username}}</span></template>
              <el-menu-item index="2-1" @click="dialogShowInfoVisible=true">个人信息</el-menu-item>
              <!--个人信息-->
              <el-dialog width="380px"  title="个人信息" center  :visible.sync="dialogShowInfoVisible" :append-to-body="true" :lock-scroll="false" >
                <el-form id="form" :model="ruleForm" action="https://www.dragonjun.com/boot/pay/add" method="post"   label-width="80px">
                  <!--<el-form-item label="图像" prop="name">-->
                    <el-upload
                            class="avatar-uploader"
                            action="https://www.dragonjun.com/boot/file/upload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                 <!-- </el-form-item>-->
                  <el-form-item style="margin-left: 15px" label="用户名" prop="password">
                    <el-input style="width: 170px"
                            placeholder="请输入新用户名"
                              v-model="loginInfo.username"
                            clearable>
                    </el-input>
                  </el-form-item>

                  <el-form-item style="margin-left: 15px" label="手机" prop="password">
                    <el-input
                            style="width: 170px"
                            type="email"
                            placeholder="请输入新手机"
                            v-model="loginInfo.phone"
                            clearable>
                    </el-input>
                  </el-form-item>

                  <el-form-item style="margin-left: 15px" label="邮箱" prop="password">
                    <el-input
                            style="width: 170px"
                            placeholder="请输入新邮箱"
                            v-model="loginInfo.email"
                            clearable>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button id="update" type="primary"  @click="updateInfo()" >保存修改</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>



              <el-menu-item @click="password()" index="2-2">修改密码</el-menu-item>
              <el-tooltip v-if="loginInfo.is_vip==2" class="item" effect="dark" :content='data+loginInfo.time' placement="right-end">
                <el-menu-item index="2-4" >我的会员</el-menu-item>
              </el-tooltip>
              <el-menu-item index="2-3" @click="logout()">注销</el-menu-item>
            </el-submenu>
            <el-menu-item  index="3" v-if="(isLogin===1 && loginInfo==null)|| loginInfo===1" @click="dialogRegisterVisible = true" >注册</el-menu-item>
            <!--注册组件-->
              <el-dialog  width="400px"  title="注册"  :visible.sync="dialogRegisterVisible" :append-to-body="true" :lock-scroll="false">
                <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  label-width="80px">
                  <el-form-item label="用户名" prop="name">
                    <el-input placeholder="请输入用户名" v-model="ruleForm.name" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input  type='password' v-model="ruleForm.password" placeholder="请输入密码" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phone">
                    <el-col :span="11">
                      <el-input style="width: 150px" v-model="ruleForm.phone" placeholder="请输入手机号码" clearable></el-input>
                    </el-col>
                    <!--<el-col class="line" :span="2"> </el-col>-->
                    <el-col :span="11">
                      <el-button  :type="button_status" ref="code" id="code" :disabled="button_status=='danger'" @click="getCode()" >获取验证码</el-button>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="验证码" prop="code">
                    <el-input placeholder="请输入验证码" v-model="ruleForm.code" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input placeholder="请输入邮箱" v-model="ruleForm.email" clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" >立即注册</el-button>
                    <el-button type="danger" @click="dialogRegisterVisible = false">暂不注册</el-button>
                  </el-form-item>
                </el-form>

              </el-dialog>
            <el-menu-item  v-if="(isLogin===1 && loginInfo==null)|| loginInfo===1" index="4" @click="dialogLoginVisible = true">登录</el-menu-item>
            <!--登录组件-->
            <el-dialog width="400px"  title="登录" :visible.sync="dialogLoginVisible" :append-to-body="true" :lock-scroll="false">
              <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  label-width="80px">
                <el-form-item label="用户名" prop="name">
                  <el-input placeholder="用户名/手机/邮箱" v-model="ruleForm.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input  type='password' placeholder="请输入密码" v-model="ruleForm.password" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitLoginForm('ruleForm')"  >立即登录</el-button>
                  <el-button type="danger" @click="password()" >找回密码</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>

            <el-menu-item @click="go_to()"  index="5">前端申</el-menu-item>
          </el-menu>
        </div>
      </div>
    <!--广告部分-->
    <!--<embed id="test_ad" src="https://sc.chinaz.com/FlashDemo.aspx?downloadID=14201784316909" quality="high" wmode="transparent" pluginspage="https://www.qdshen.com" type="application/x-shockwave-flash" width="1200" height="120">-->
      <!--身体-->
    <!--网页右边排版(右上)-->
    <div class="d_right_1">
      <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/right_1.png" alt="">
    </div>

    <!--网页右边排版(右上)-->
    <div class="d_left_1">
      <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/left_1.png" alt="">
    </div>
   <!-- &lt;!&ndash;网页右边排版(右下)&ndash;&gt;
    <div class="d_right_2">
      <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/dog_right.png" alt="">
    </div>-->

    <!--&lt;!&ndash;网页右边排版(左下)&ndash;&gt;
    <div class="d_left_2">
      <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/dog_left.png" alt="">
    </div>-->
    <!--美女友情提示-->
    <!--<div id="girl_info" v-if="is_show_girl">
      <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/girl_info.png" alt=""> 
      &lt;!&ndash;关闭按钮&ndash;&gt;
      <div @click="closeGirl()" class="el-icon-circle-close-outline dib_info_btu"></div>
      &lt;!&ndash;对话框&ndash;&gt;
      <div class="dialogue_info">
        欢迎光临后端君，奴家等你等的好辛苦呢？
      </div>
    </div>-->

    <div class="d_body">
      <router-view></router-view>
    </div>
      <!--聊天的功能-->
      <div class="service">
          <el-tooltip class="item" effect="dark" content="可以跟人家聊天哦" placement="top">
              <!--按钮-->
              <div class="service_img" @click="dialogServiceVisible=true" >
                  <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/service.png" alt="">
              </div>
          </el-tooltip>

        <el-dialog width="450px"   title="在线小美女" center  :visible.sync="dialogServiceVisible" :append-to-body="true" :lock-scroll="false" >
         <div class="robot">
           <!--聊天框-->
           <div class="robot_head">
            <!--增加图标-->
             <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/service.png" alt="">
             <span class="head_chat">人家什么都知道哦！</span>
           </div>
           <!--进度条-->
           <el-progress style="margin-left: 20px" :percentage="bar" ></el-progress>
           <div class="chat_info">
             <!--聊天内容注入-->
             <ul>
               <li v-for="(v,k) in chats" v-if="k>=minKey-4 && k<=minKey ">
               <!--  &lt;!&ndash;头像&ndash;&gt;
                 <img v-if="v.type===2" class="robot_img" src="https://www.dragonjun.com/ftpimg/1515464657.jpg" alt="">-->
                 <span  :class="['chat_'+v.type]">{{v.info}}</span><br/>
               </li>
             </ul>
           </div>

           <!--底层输入框-->
           <div id="foot" class="robot_foot" @click="foot_to()">
             <input @blur="blur_to()" v-model="answer" id="input" type="text" @keyup.13="enter_to()" placeholder="快来和我聊聊天">
              <div  id="enter"  @click="enter_to()" class="el-icon-mobile-phone" ></div>
           </div>

         </div>
        </el-dialog>


      </div>
    <!--音乐组件-->
   <!-- <el-tooltip v-if="is_show"   class="item" effect="dark" content="打开播放器" placement="top-start">
      <div   @click="show()" id="button_music" class="el-icon-service"></div>
    </el-tooltip>
    &lt;!&ndash;<div v-if="is_show" @click="show()" id="button_music" class="el-icon-service"></div>&ndash;&gt;
    <div id="music" class="music">
      <div id="i" @click="close_to()" class="el-icon-remove" style="position: absolute;top: 10px;right: 15px;font-size: 20px;"></div>
      <embed src="https://www.xiami.com/widget/333096981_2723108,3644857,1769930381,1769989971,3644856,_215_346_FF8719_494949_1/multiPlayer.swf" type="application/x-shockwave-flash" width="215" height="346" wmode="opaque"></embed>
    </div>-->
      <!--&lt;!&ndash;推广头标&ndash;&gt;
    <div class="d_push">
      <a target="_blank" href="https://sc.chinaz.com/FlashDemo.aspx?downloadID=14201784316909"><img border="0" src="https://wpa.qq.com/pa?p=2:1012064404:53" alt="与后端军QQ交流" title="与后端军QQ交流"/></a>
    </div>-->
    <!--尾部-->
    <div class="d_foot">
         <div style="color: orangered;">为钱做事,容易累 为理想做事,能够耐风寒 为兴趣做事,则永不倦怠</div>
          <div class="d_foot_1">今日访问人数 <span>{{flow.today}}</span>   历史访问人数 <span>{{flow.history}}</span></div>
          <div class="d_foot_2">Copyright 后端君©版权所有</div>
          <div class="d_foot_3"><a href="http://www.miitbeian.gov.cn">皖ICP备17026228号</a></div>
    </div>
  </div>

</template>

<script >
  import  axios from  'axios'
  export default {
    name:'home',
    data(){
      /*自定义手机验证*/
      var reg=/^1[345678]\d{9}$/;
      var phone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码！'));
        } else if (!reg.test(value)) {
          callback(new Error('手机格式不正确!'));
        } else {
          callback();
        }
      };
      return{
          /*进度条*/
          bar:0,
          answer:'',
          /*聊天的下表*/
          minKey:0,
          /*css*/
          chats:[

          ],

          /*城市三级联动*/
          is_show_girl:true,
          provinces:{},
          cities:{},
          areas:{},
          select_provinces:'',
          is_disbled:true,
          bu_type:'warning',
          select_cities:'',
          select_areas:'',
          /*文件上传测试*/
          imageUrl: {},
          imgNewUrl:{},
        /*音乐框显示*/
          is_show:true,
          button_status:'success',
          isLogin:1,
          loginInfo:{
              url:'',
          },//保存用户的登录信息
          test_1:{},
          dialogRegisterVisible: false,
          dialogLoginVisible: false,
          dialogVipVisible: false,
          dialogShowInfoVisible: false,
          dialogUpdateCityVisible:false,
          dialogServiceVisible:false,
          data:'到期日：',
        ruleForm: {
            name: '',
            password: '',
            phone: '',
            code: '',
            email: '',
            radio:1,
            money:0,
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ],
          phone: [
            { validator: phone, trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
        },
        weather:{
            cityInfo:{
              c3:{},
            },
            f1:{
                  day_weather_pic:{}
              },
            f2:{
                day_weather_pic:{}
            },
            f3:{
                day_weather_pic:{}
            },
            now:{
                temperature:{},
                weather:{},
                weather_pic:{},
                aqiDetail:{}
            }
        },
        src:'',
      }
    },
    computed:{
        /*计算按钮是否禁用*/
        isDisbled(){
          if(this.select_provinces.length>=1&& this.select_areas.length>=1 && this.select_cities.length>=1){
              this.is_disbled=false;
              this.bu_type='success';
          }
          return this.is_disbled;
        },
      /*流量数据*/
      flow(){
        return this.$store.getters.getFlow;
      },
        /*计算金额*/
        money(){
            if(this.ruleForm.radio==6){
                return this.ruleForm.radio*10*0.9;
            }else if (this.ruleForm.radio==12){
                return this.ruleForm.radio*10*0.8;
            }else{
                return this.ruleForm.radio*10;
            }
        },
        /*计算天数*/
        count(){
            return this.ruleForm.radio*31;
        },
        /*获取登录的用户*/
        user(){
            let user=JSON.parse(sessionStorage.getItem('login_user'));
            if(user==null){
                return 8;
            }else {
                return JSON.parse(sessionStorage.getItem('login_user')).id;
            }
        }

    },


     mounted(){
         /*初始化任务特效*/
      /*   var girl=document.getElementById("girl_info");
         girl.style.right='32%';
         //5s后自动关闭弹窗
         window.setTimeout(()=>{
             this.is_show_girl=false;
         },5000)*/
     },

      created(){
      this.loginInfo=JSON.parse(sessionStorage.getItem('login_user'));
      if(this.loginInfo!=null){
          this.imageUrl=this.loginInfo.url;
      }

      //城市三级联动
        //初始化天气
        let url='https://www.dragonjun.com/boot/query/get_province';
        let data=null;
        axios.post(url,data,{
            headers: {
                'Content-Type': 'application/json',
            }
        }).then((data)=>{
            //console.log(data);
            this.provinces=data.data.data;
           // console.log(this.provinces)
        }).catch((error)=>{
            console.log(error)
        });

      //初始化天气
       url='https://www.dragonjun.com/boot/query/get_wether';
       data=null;
      axios.post(url,data,{
        headers: {
          'Content-Type': 'application/json',
        }
      }).then((data)=>{
        this.weather=data.data.data.showapi_res_body;
        //console.log(this.weather)
      }).catch((error)=>{
        console.log(error)
      });
    },
    methods:{
        /*聊天通知*/
        open_chat_inform(data) {
            this.$notify({
                title: '回复',
                message: data,
                type: 'success'
            });
        },
        open_chat_inform_error(data) {
            this.$notify.error({
                title: '错误',
                message: data,
            });
        },
        /*还原*/
        blur_to(){
            var div=document.getElementById('foot');
            var input=document.getElementById('input');
            var enter=document.getElementById('enter');
            enter.style.color='black';
            div.style.background='#F0F3F6';
            input.style.background='#F0F3F6';
        },
        /*改变背景*/
        foot_to(){
          var div=document.getElementById('foot');
          var input=document.getElementById('input');
          var enter=document.getElementById('enter');
          enter.style.color='red';
          div.style.background='white';
          input.style.background='white';
        },
        /*聊天的方法*/
        enter_to(){
            //向数据增加数据
            if (this.answer.trim().length===0){
                this.open_chat_inform_error('请先输入内容吧！');
                return;
            }
            var info={'type':1,'info':this.answer};
            this.chats.push(info);
            //进度条开始
            this.bar=0;
            //进度条自增
            var inter= window.setInterval(()=>{
                if(this.bar===100){
                    //停止定时器
                    inter.clearInterval();
                }
                this.bar++;
            },100);
            //console.log(this.chats)
            this.minKey=this.chats.length;
            //调取机器人
            let url='https://www.dragonjun.com/boot/query/get_robot';
            let param = new URLSearchParams();
            param.append("info",this.answer);
            axios.post(url,param,{
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((data)=>{
                //console.log(data);
                //再次增加数据
                var info={'type':2,'info':data.data.data.text.substring(0, 20)+'.....'};
                this.chats.push(info);
                //console.log(this.chats);
                this.minKey=this.chats.length;
                //进度条结束
                this.bar=100;
                //弹窗通知
                this.open_chat_inform(data.data.data.text);
                //发送语音
                var url='https://www.dragonjun.com/boot/query/get_baidu_audio?src='+encodeURI(encodeURI(data.data.data.text));
                console.log(url);
                //var url='http://localhost:8080/query/get_baidu_audio?src'+encodeURI(data.data.data.text);
                new Audio(url).play();

            }).catch((error)=>{
                console.log(error);
                var info={'type':2,'info':'哎呀！请输入的时候不要带空格！人家看不懂！'};
                this.chats.push(info);
                this.minKey=this.chats.length;
                var url='https://www.dragonjun.com/boot/query/get_baidu_audio?src='+encodeURI(encodeURI('哎呀！请输入的时候不要带空格！人家看不懂！'));
                console.log(url);
                //var url='http://localhost:8080/query/get_baidu_audio?src'+encodeURI(data.data.data.text);
                new Audio(url).play();
            });
        },
        /*关闭girl弹窗*/
        closeGirl(){
          this.is_show_girl=false;
        },
        /*更换区域的天气*/
        updateCityWeather(){
          //console.log("当前的城市",this.select_areas);
          /*开始更换*/
            let url='https://www.dragonjun.com/boot/query/get_weather_area';
            let param = new URLSearchParams();
            param.append("areaName",this.select_areas );
            axios.post(url,param,{
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((data)=>{
                this.weather=data.data.data.showapi_res_body;
                //console.log(this.weather);
                this.open_success("城市切换成功");
                this.dialogUpdateCityVisible=false;

            }).catch((error)=>{
                //console.log(error)
                this.open_error("对不起！暂无此城市信息");
            });
        },
        /*更换区域*/
        updateCity(id){
            //获取市级列表
            let url='https://www.dragonjun.com/boot/query/get_areas/'+this.select_cities;
            let data=null;
            axios.post(url,data,{
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.areas=data.data.data;
                this.select_areas=this.areas[0].area;
                //console.log(this.areas)
            }).catch((error)=>{
                console.log(error)
            });

        },
        /*更换城市*/
        updateProvinces(id){
          //获取市级列表
            let url='https://www.dragonjun.com/boot/query/get_cities/'+this.select_provinces;
            let data=null;
            axios.post(url,data,{
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.cities=data.data.data;
                this.select_cities=this.cities[0].cityid;
                //console.log("id={}",this.select_cities);
                //获取市级列表
                url='https://www.dragonjun.com/boot/query/get_areas/'+this.select_cities;
                data=null;
                axios.post(url,data,{
                    headers: {
                        'Content-Type': 'application/json',
                    }
                }).then((data)=>{
                    //console.log(data);
                    this.areas=data.data.data;
                    this.select_areas=this.areas[0].area;
                   // console.log(this.areas)
                }).catch((error)=>{
                    console.log(error)
                });

                //console.log(this.cities)
            }).catch((error)=>{
                console.log(error)
            });




        },
        /*基本信息修改*/
        updateInfo(){
            //手机正则
            let phonereg=/^1[345678]\d{9}$/;
            //邮箱正则
            let emailreg=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
            if(!phonereg.test(this.loginInfo.phone)){
                this.open_error("手机格式不正确")
            }else if(!emailreg.test(this.loginInfo.email)){
                this.open_error("邮箱格式不正确")
            }else if(this.loginInfo.username.trim().length===0){
                this.open_error("用户名不能为空")
            }else{
                //开始修改
                let data=JSON.stringify({"imgUrl":this.loginInfo.url,"userName":this.loginInfo.username,"phone":this.loginInfo.phone,"email":this.loginInfo.email,"userId":this.loginInfo.id});
                let url='https://www.dragonjun.com/jersey/api/user/update_info';
                axios.post(url,data,{
                    headers: {
                        'Content-Type': 'application/json',
                    }
                }).then( (data)=> {
                    //console.log(data);
                    if(data.data.code===0){
                        //成功
                        this.dialogShowInfoVisible=false;
                        this.isLogin=1;
                        sessionStorage.removeItem('login_user');
                        this.open_success("修改成功！请2s重新登录！");
                        //TODO 是否需要定时
                        window.setTimeout(()=>{
                           this.dialogLoginVisible=true;
                        },2000);
                    }

                }).catch( (error)=> {
                    console.log('错误'+error);
                });

            }


        },
        /*文件上传*/
        handleAvatarSuccess(res, file) {
            //console.log('file',file);
            this.imgNewUrl=file.response.data;
            this.loginInfo.url=file.response.data;
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            //console.log('file',file);
            const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
            const isLt1M = file.size / 1024 / 1024 < 1;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }
            if (!isLt1M) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
            }
            return isJPG && isLt1M;
        },


        /*友情链接*/
        go_to(){
        window.location.href='https://www.qdshen.com';
        },
        /*打开弹窗*/
        open_window(){
            let user=JSON.parse(sessionStorage.getItem('login_user'));
            if(user==null){
                this.open_error('请登录开通！');
            }else {
                this.dialogVipVisible=true;
            }
        },
        /*开通会员*/
        openVip(){
            let form=document.getElementById('form');
            form.submit();
        },
      /*显示音乐盒*/
      show(){
        this.is_show=!this.is_show;
        let music=document.getElementById('music');
        music.style.width='215px';
        music.style.height='120px';
      },
      /*最小化*/
      close_to(){
        let music=document.getElementById('music');
        music.style.width='0';
        music.style.height='0';
        window.setTimeout(()=>{
          this.is_show=!this.is_show;
        },2000);

      },
      //主页跳转
      goHome(){
        this.$router.push('/');
      },
      //修改密码页面跳转
      password(){
        this.$router.push('/password');
        //关闭弹窗
        this.dialogLoginVisible=false;
      },
      //发送验证码
      getCode(){
        //自定义格式
        var reg=/^1[345678]\d{9}$/;
        if(this.ruleForm.phone.trim()==''){
          this.open_error('手机号码不能为空！')
        }else if(!reg.test(this.ruleForm.phone)){
          this.open_error('请输入正确的手机格式！')
        }else{
          //发送短信
          let data=JSON.stringify({"phone_or_email":this.ruleForm.phone,"type":1});
          let url='https://www.dragonjun.com/jersey/api/user/send_sms_email';
          axios.post(url,data,{
            headers: {
              'Content-Type': 'application/json',
            }
          }).then( (data)=> {
            //console.log(data);
            let result=data.data;
            //console.log(result)
            if(result.code===0){
              this.open_success('短信发送成功！');
            }else{
              //登录失败！
              this.open_error(result.desc);
            }
          }).catch( (error)=> {
            console.log('错误'+error);
          });
          let count=120;
          //改变按钮的状态
          let codeButton=document.getElementById('code');
          //let codeButton=this.$refs.code;
          this.button_status='danger';
          //codeButton.type='danger';
          codeButton.innerHTML=count+'后重试';
          let status= this.button_status;
          //倒计时
          let timer=window.setInterval(()=> {
            //执行定时任务
            if(count===0){
              //停止计时器
              //console.log(status);
              this.button_status='success';
              //console.log(this.button_status);
              codeButton.removeAttribute('disabled');
              codeButton.innerHTML='重试';
              window.clearInterval(timer);
            }else{
              count--;
              codeButton.innerHTML=count+'后重试';
            }
          },1000);
        }
      },
      //定义弹窗（成功）
      open_success(msg) {
        this.$message({
          message: msg,
          type: 'success'
        });
      },
      //错误
      open_error(msg) {
        this.$message.error(msg);
      },
      /*注册开始*/
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //开始注册
            let data=JSON.stringify({"username":this.ruleForm.name,"password":this.ruleForm.password,"phone_number":this.ruleForm.phone,"code":this.ruleForm.code,"email":this.ruleForm.email});
            //console.log(this.ruleForm.username);
           // console.log(data);
            let url='https://www.dragonjun.com/jersey/api/user/register';
            axios.post(url,data,{
              headers: {
                'Content-Type': 'application/json',
              }
            }).then( (data)=> {
              //console.log(data);
              let result=data.data;
              //console.log(result)
              if(result.code===0){
                this.dialogRegisterVisible=false;
                this.open_success('恭喜你！注册成功！');
              }else{
                //登录失败！
                this.open_error(result.desc);
              }
            }).catch( (error)=> {
              console.log('错误'+error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /*登录开始*/
      submitLoginForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //开始登录
            let data=JSON.stringify({"username":this.ruleForm.name,"password":this.ruleForm.password});
            let url='https://www.dragonjun.com/jersey/api/user/login';
            axios.post(url,data,{
              headers: {
                'Content-Type': 'application/json',
              }
            }).then( (data)=> {
              //console.log(data);
              let result=data.data;
              //console.log(result)
              if(result.code===0){
                let loginUser=JSON.stringify(result.data);
                //登录成功！
                sessionStorage.setItem("login_user",loginUser);
                //消息提示
                this.open_success('登录成功！');
                // 赋值提示
                this.isLogin = 2;
                this.loginInfo = result.data;
                  //初始用户头像
                  this.imageUrl=this.loginInfo.url;
                //console.log("登录信息={}",this.loginInfo);
                //关闭弹窗
                this.dialogLoginVisible=false;
              }else{
                //登录失败！
                this.open_error(result.desc);
              }
            }).catch( (error)=> {
              console.log('错误'+error);
            })
          } else {
            return false;
          }
        });
      },
      //退出登录
      logout(){
        //清除session
        sessionStorage.removeItem('login_user');
        this.loginInfo=null;
        this.isLogin=1;
        this.open_success('已经退出登录！')
      }
    }



  }

</script>

<style >
  html,body{
    font-family: 微软雅黑;
    padding: 0;
    margin: 0;
  }
  /*头部css*/
  .d_head{
   // background:#BCD9EE ;
    background: #F5ABA9;
    width: 100%;
    height: 60px;
    display: inline-block;
    text-align:center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
  }
  .d_head .d_head-1{
    display: inline-block;
    width: 1300px;
    height: 60px;

  }
  .d_head .img{
    width: 180px;
    height: 60px;
    //opacity:0.8;
    float: left;
    transition: all 1s;
  }
  .d_head .img:hover{
    cursor:pointer;
    //opacity:1;
    transform: scale(1.1);
  }
  #el-menu{
    float: right;
    border-bottom: none;
    //background: #BCD9EE;
    background: #F5ABA9;
    height: 50px;
    text-align: left;
  }
  /*尾部css*/
  .d_foot{
    margin-top: 5%;
    width: 100%;
    height: auto;
    text-align: center;
    line-height: 30px;
    //background: #BCD9EE;
    background: #F5ABA9;
    color: #666666;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .d_foot_1 span{
    color: red;
  }
  .d_foot_3 a{
    text-decoration: none;
    color:#666666 ;
  }
  /*QQ推广*/
  .d_push{
    position: fixed;
    right: 0%;
    top:40%;
  }
  /*音乐*/
  .music{
    position: fixed;
    right: 5px;
    top: 12%;
    //border: 1px solid black;
    overflow: hidden;
    width: 0;
    height: 0;
    box-shadow: 10px 10px 10px #6666;
    border-radius: 10px;
    z-index: 5;
    transition: all 2s;
  }
  #button_music{
    position: fixed;
    right: 5px;
    top: 12%;
    margin-right: 20px;
    font-size: 40px;
    color: saddlebrown;
    z-index: 5;
  }
  /*#item_1{*/
    /*position: fixed;*/
    /*right: 5px;*/
    /*top: 20%;*/
  /*}*/
  #button_music:hover{
    cursor: pointer;
    color: red;
  }
  #i:hover{
    cursor: pointer;
    color: red;
  }
  /*注册登录*/
  #code{
    margin-left: 30%;
  }
  /*广告*/
 /* #test_ad{
    margin-top: 10px;
    margin-left: 20%;
  }*/
  /*天气*/
  .weather{
    float: left;
    width: 200px;
    height: 60px;
    text-align: center;
    margin-left: 8%;
  }
  .weather img{
    width: 60px;
    height: 60px;
    margin-left: 2px;
    float: left;

  }
  .w_info_more{
    background: linear-gradient(#3173EB,#C2DBF5);
    width: auto;
    height: auto;
    border-radius: 5px;
    color: white;
    font-family: 楷体;
    font-size: 20px;
  }

  .weather .info_1{
    color: #666666;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;

  }
  .info_2{
    margin-left: 5px;
   }
  .info_2 span{
    color:#666666;

  }
  .d_info{
    width: auto;
    height: auto;
    float: left;
  }
  #pay{
    width: 200px;
    margin-top: 10px;
  }
  /*文件*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left:115px;
    margin-bottom: 30px;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  #update{
    margin-left: 37px;
    margin-top: 5px;
  }
  .info_img{
    width: 30px;
    height: 30px;
    border-radius: 50px;
    margin-right: 5px;
  }
  .more_1{
    height: auto;
    width:auto;
    border-bottom: 1px solid navajowhite;
    padding-bottom: 10px;
    transition: all 5s;
  }
  .more_1:hover{
    cursor: pointer;
    color: red;

  }
  .more_2{
    //border: 1px solid red;
    height: 155px;
    text-align: center;
  }
  .info_to{
    width:calc(96% / 3);
    height: 130px;
    float: left;
    border-left: 1px solid navajowhite ;
    margin-right: 1px;
    margin-top: 20px;
    transition: all 2s;
  }
  .info_to:first-child{
    border: none;
    margin-left: 5px;
  }
  .info_to:hover{
    cursor: pointer;
    color: orangered;
  }
  .div_img_1{
    width: 60px;
    height: 60px;
    float: left;
  }
  .div_img_1:hover{
    cursor: pointer;
  }
  .s_update{
    font-size: 11px;
    color: orangered;
    font-family: 楷体;
  }
  .s_update:hover{
    cursor: pointer;
    color: royalblue;
  }
  .d_right_1 img{
    width: 400px;
    height: 400px;
    position: fixed;
    top: 60px;
    right: 0;
    z-index: -1;
      opacity:0.5;
  }
  .d_left_1 img{
    width: 400px;
    height: 400px;
    position: fixed;
    top:60px;
    left: 0;
    z-index: -1;
      opacity:0.5;
  }

  .d_right_2 img{
    width: 200px;
    height: 200px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 0;
    transition: all 3s;
  }

  .d_right_2 img:hover{
    transform: scale(1.2);
    cursor: pointer;
  }
  .d_left_2 img{
    width: 200px;
    height: 200px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    transition: all 3s;
  }

  .d_left_2 img:hover{
    transform: scale(1.2);
    cursor: pointer;
  }
  #girl_info{
    position: fixed;
    right: -10px;
    bottom: 5%;
    z-index: 1;
    //border: 1px solid red;
    transition: all 3s;
    width: 32%;
    box-shadow: 0 0 10px #666666;
    border-radius: 20px;
    background: #E5DBD9;
    opacity:0.92;
    height: 80%;
  }
  #girl_info img{
    width: calc(100% / 2);
    height: 100%;
    float: left;
  }
  .dib_info_btu{
    float: right;
    font-size: 50px;
    margin-right: 30px
  }
  .dib_info_btu:hover{
    cursor: pointer;
    color: orangered;
  }
  .dialogue_info{
    float: left;
    width: 45%;
    height: 10%;
    //border: 1px solid red;
    margin-top: 20px;
    font-size: 1vw;
    color: #666666;
    font-family: 宋体;
    line-height: 200%;
    text-indent: 1em;
    box-shadow: 0 0 5px #606266;
    border-radius: 10px;
    background: white;
  }

  .service_img{
        position: fixed;
        right: -10px;
        bottom: 5%;
        transition: 2s all;
    }
  .service_img:hover{
      cursor: pointer;
     transform: scale(1.1) translate(-10px,10px);
  }
  .service_img img{
      width: 140px;
      height: 165px;
  }
  .robot{
    width: 370px;
    height: 430px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 10px #666666;
    border-radius: 5px;
  }
  .robot_foot{
    height: 55px;
    width: 100%;
    background: #F0F3F6;
    position: absolute;
    bottom:0;
    line-height: 55px;
    box-shadow: 0 1px 2px #666666;
  }
  .robot_foot input{
    height:  45px;
    width: 300px;
    margin-left: 20px;
    font-size: 17px;
    color: #B8B9B9;
    border: none;
    background: #F0F3F6;
    outline: none;
  }
  .chat_info{
    width: 100%;
    height: 360px;
    //border: 1px solid rebeccapurple;
    margin-top: 5px;
  }
  .chat_1{
    background: #00A3F0;
    width: 220px;
    height: auto;
    display: inline-block;
    color: white;
    font-size: 19px;
    border-radius: 10px;
    margin-top: 15px;
    margin-right: 20px;
    float: right;
    padding: 10px;
  }
  .chat_2{
    background: #F4F7F9;
    width: 220px;
    height: auto;
    display: inline-block;
    color: #878889;
    font-size: 19px;
    border-radius: 10px;
    margin-top: 15px;
    margin-left: 10px;
    padding: 10px;
  }
  .chat_info ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .robot_head{
    width: 100%;
    height: 70px;
    background: #00A3F0;
    border-radius: 5px 5px 0 0;
  }
  .robot_head img{
    width: 50px;
    height: 70px;
    margin-left: 50px;
    float: left;

  }
  .robot_img{
    width: 30px;
    height: 30px;
    border-radius: 25px;
    margin-left: 15px;
  }
  #enter{
      font-size: 20px;
  }
  #enter:hover{
      cursor: pointer;
      color: royalblue;
    }
  .head_chat{
   box-shadow: 0 5px 5px #666666;
    width: 160px;
    height: 30px;
    line-height: 30px;
    float: left;
    margin-top: 17px;
    margin-left: 10px;
    background: orangered;
    color: white;
    padding-left: 20px;
    border-radius: 12px;
    font-family: 楷体;
  }








</style>
